// 实现这个项目的构建任务

const { src, dest, parallel, series, watch } = require('gulp')

const del = require('del')
const browserSync = require('browser-sync')
const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = browserSync.create()

const clean = () => {
    return del(['dist', 'temp'])
}

const style = () => {
    return src( 'src/assets/styles/*.scss', { base: 'src' } )
        .pipe(plugins.sass( { outputStyle: 'expanded' } ))
        .pipe(dest('temp'))
        .pipe(bs.reload( {stream: true} ))
}

const script = () => {
    return src( 'src/assets/scripts/*.js', { base: 'src' } )
        .pipe( plugins.babel( { presets: ['@babel/preset-env'] } ) )
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}

const page = () => {
    return src( 'src/*.html', { base: 'src' } )
        .pipe(plugins.swig())
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}

const image = () => {
    return src( 'src/assets/images/**', { base: 'src' } )
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const font = () => {
    return src( 'src/assets/fonts/**', { base: 'src' } )
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const extra = () => {
    return src( 'public/**', { base: 'public' } )
    .pipe(dest('dist'))
}

const serve = () => {
    // 监控文件变化
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)

    bs.init({
        notify: false,
        port: 2080,
        open: false,
        server: {
            baseDir: ['temp', 'src', 'public'],
            routers: {
                '/node_modules': 'node_modules'
            }
        }
    })
}

const useref = () => {
    return src('temp/**', { base: 'temp'} )
        .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
        // 压缩html  js  css
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
                collapseWhitespace: true,   // 去掉所有空白符
                minifyCss: true,            // 压缩页面内样式
                minifyJs: true              // 压缩页面内js
            })))
        .pipe(dest('dist'))
}

const lint = parallel(style, script)

const compile = parallel( style, script, page )

// 上线之前执行的任务
const build = series(clean, parallel( series(compile, useref), image, font, extra ))

const develop = series(compile, serve)

module.exports = {
    clean,
    lint,
    serve,
    build,
    develop
}








